import React, { Component } from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { Icon, } from 'antd-mobile';
import Newpeople from "./components/newpeople/newpeople"
import Groupon from "./components/groupon/groupon"
import Seckill from "./components/seckill/seckill"
import Indexgoods from "./components/indexgoods/indexgoods"
import Cheap from "./components/cheap/cheap"

// 引css
import "./home.css"
// 引actions以及导出的方法
import { actions, getGetnew, getGroupon, getCountdown, getSeckill, getIndexgoods,getFlag,getCheap } from "../../store/modules/home"
class Home extends Component {
    render() {
        let { getnew, groupon, countdown, seckill, indexgoods,flag,cheap,home:{changeFlag,reqCartadd}} = this.props
        return (
            <div className="pad home">
                <div className="search clearfix">
                    <Icon type="search" className="fl" />
                    <input type="text" placeholder="按内容搜索" className="fl" />
                </div>
                {/* 新人专享 */}
                <Newpeople getnew={getnew} reqCartadd={reqCartadd}></Newpeople>
                {/* 万人团 */}
                <Groupon groupon={groupon} reqCartadd={reqCartadd}></Groupon>
                {/* 秒杀 */}
                <Seckill seckill={seckill}  reqCartadd={reqCartadd}></Seckill>
                <ul className="nav">
                    <li onClick={()=>changeFlag(0)} className={flag===0?"active":null}>1</li>
                    <li onClick={()=>changeFlag(1)} className={flag===1?"active":null}>2</li>
                    <li onClick={()=>changeFlag(2)} className={flag===2?"active":null}>3</li>
                    <li onClick={()=>changeFlag(3)} className={flag===3?"active":null}>4</li>
                </ul>
                {/* 商品信息 */}
                <Indexgoods indexgoods={indexgoods} flag={flag}  reqCartadd={reqCartadd}></Indexgoods>
                {/* 商品信息 */}
                <Cheap cheap={cheap}></Cheap>
            </div>
        )
    }
    componentDidMount() {
        let { reqGetnew, reqGetgroupon, reqGetcountdown, reqGetseckill, reqGetindexgoods,reqGetcoupon } = this.props.home
        // 新人专享
        reqGetnew()
        // 万人团
        reqGetgroupon()
        // 倒计时
        reqGetcountdown()
        // 秒杀
        reqGetseckill()
        // 商品信息
        reqGetindexgoods()
        // 优惠券
        reqGetcoupon()
    }
}

let mapStateToProps = (state) => ({
    // 新人专享
    getnew: getGetnew(state),
    // 万人团
    groupon: getGroupon(state),
    // 倒计时
    countdown: getCountdown(state),
    // 秒杀
    seckill: getSeckill(state),
    // 商品信息
    indexgoods: getIndexgoods(state),
    // 商品信息
    flag: getFlag(state),
    // 优惠券
    cheap: getCheap(state),
});
let mapDispatchToProps = (dispatch) => ({
    home: bindActionCreators(actions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Home)
